<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>

		<link rel="stylesheet" type="text/css" href="./../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="./../plugins/easyui//themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="./../plugins/easyui/themes/icon.css">

		<script type="text/javascript" src="./../plugins/easyui/jquery.min.js"></script>
		<script type="text/javascript" src="./../plugins/easyui/jquery.easyui.min.js"></script>

		<script>
			var statue = 0;

			function add() {
				statue = 1;
				$('#dlg').dialog('open').dialog('center').dialog('setTitle', '添加菜类');
				$('#fm').form('clear');

			}
			function chang() {
			
				var row = $('#userTable').datagrid('getSelected');
			
				if (row) {
					$('#dlg').dialog('open').dialog('center').dialog('setTitle', '修改菜类');
			
					$('#fm').form('load', row);
					statue = 2;
				}		
			}
			

			function del() {
				var row = $('#userTable').datagrid('getSelected');
				if (row) {
					$.messager.confirm('提示', '是否删除', function(result) {
						if (result) {
							$.ajax({
								type: "POST",
								url: "http://192.168.150.202:8080/Api/foodTypes",
								data: "action=del&id=" + row.id,
								success: function(respData) { //{"success":false,"msg":xx}
									if (respData.success) {
										$('#userTable').datagrid('reload'); // reload the user data
									} else {
										$.messager.show({
											title: 'Error',
											msg: respData.msg
										});
									}

								}

							});
						}
					});
				}
			}



			function save() {


				if (statue == 1) {
					var icon = $("input[name='icon']").val();
					var name = $("input[name='name']").val();
					$.ajax({
						type: "POST",
						url: "http://192.168.150.202:8080/Api/foodTypes",
						data: "icon=" + icon + "&name=" + name + "&action=add",

						// data:"loginName="+loginName+"&password="+password,
						success: function(responseData) { //{"success":false,"msg":"xx"}
							if (responseData.success) {
								console.log(responseData);
								$.messager.show({
									content: '添加成功'
								});
								$('#dlg').dialog('close'); // close the dialog
								$('#userTable').datagrid('reload');
							} else {
								$.messager.show({
									title: 'Error',
									msg: responseData.msg
								});
							}
						}
					});
				} else {
					var icon = $("input[name='icon']").val();
					var name = $("input[name='name']").val();
					var row = $('#userTable').datagrid('getSelected');

					var param = $("#fm").serialize(); //icon=x&name=yy

					if (row) {
						$.messager.confirm('提示', '是否修改', function(result) {
							if (result) {
								$.ajax({
									type: "POST",
									url: "http://192.168.150.202:8080/Api/foodTypes",
									data: param + "&action=update&id=" + row.id,

									success: function(respData) { //{"success":false,"msg":xx}

										if (respData.success) {
											$.messager.show({
												content: '修改成功'
											});
											$('#dlg').dialog('close'); // close the dialog
											$('#userTable').datagrid('reload');
										} else {
											$.messager.show({
												title: 'Error',
												msg: respData.msg
											});
										}

									}

								});
							}
						});
					}
				}
			}
		</script>
	</head>
	<body>


		<table id="userTable" class="easyui-datagrid" url='http://192.168.150.202:8080/Api/foodTypes' method="get" toolbar="#toolbar"
		 pagination="true" rownumbers="true" fitColumns="true" singleSelect="true">
			<thead>
				<tr>
					<th field="icon" width="50">图片路径</th>
					<th field="name" width="50">菜类</th>
				</tr>
			</thead>

		</table>
		<div id="toolbar">
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="add()">添加信息</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="chang()">修改信息</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="del()">删除信息</a>
		</div>

		<div id="dlg" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
			<form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
				<h3>执行操作</h3>
				<div style="margin-bottom:10px">
					<input name="icon" class="easyui-textbox" required="true" label="图片路径:" style="width:100%">
				</div>
				<div style="margin-bottom:10px">
					<input name="name" class="easyui-textbox" required="true" label="菜类:" style="width:100%">
				</div>

			</form>
		</div>
		<div id="dlg-buttons">
			<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="save()" style="width:80px">执行</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"
			 style="width:80px ">取消</a>
		</div>


	</body>
</html>
